<template>
	<view class="discovery tn-safe-area-inset-bottom">
		<view class="tn-margin-sm tn-text-center">
			<view class="tn-flex tn-flex-wrap tn-padding-bottom">
				<block v-for="(item, index) in pic" :key="index">
					<view class="" style="width: 50%;" @click="gotophototList(item.mold,item.id)">
						<view class="tn-margin-xs img-shadow" style="border-radius: 10rpx;">
							<view class="tn-text-bold tn-padding-sm" style="position: absolute;">
								<text style="color: #a79c8e;">爱的 · {{item.mold==1?'照片':'视频'}}</text>
							</view>
							<view class="" style="padding: 15rpx;">
								<view class="image-aipic" :style="'background-image:url(' + item.pic + ')'">
									<view class="image-ai">
									</view>
								</view>
							</view>
							<view class="tn-text-bold tn-padding-bottom-sm tn-text-center">
								<text style="color: #a79c8e;">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<musicFab></musicFab>
	</view>
</template>

<script>
	import {listWeddingPhotoType} from '@/api/common/api'
	export default {
		name: 'photo',
		data() {
			return {
				pic: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					status: 0
				}
			}
		},
		methods: {
			gotophototList(mold,typeId) {
				if (mold == 1) {
					uni.navigateTo({
						url: 'photoList?typeId='+typeId
					});
				}
				if (mold == 2) {
					uni.navigateTo({
						url: 'videoList?typeId='+typeId
					});
				}
			},
			init(){
				listWeddingPhotoType(this.queryParams).then(response => {
					this.pic = response.rows;
				});
			}
		},
		onReady() {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	.discovery {
		max-height: 100vh;
	}

	/* 底部安全边距 start*/
	.tn-safe-area-inset-bottom {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	/* 页面阴影 start*/
	.img-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.top-fixed {
		position: fixed;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 100;
	}

	.image-ai {
		padding: 155rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-aipic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 0;
		clip-path: polygon(160rpx 0, 100% 0, 100% 100%, 0 100%, 0 60rpx, 145rpx 50rpx);
	}
</style>
